<template>
	<view>
		<view class="container">
			<view class="img-box ff-margin-top-10">
				<view class="faceLoad">
					<view class="faceLoad-box">
						<view class="loading" :style="tabberStyle"></view>
					</view>
				</view>
				<img src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/faceLogo.png" alt="">
			</view>
		</view>
		<view class="faceTxt">
			<view class="faceTxt-tips1">
				<view class="ff-font-15 ">您即将进行</view>
				<view class="ff-font-17">人脸识别</view>
			</view>
			<view class="ff-font-23 ff-font-weight">请确保正对手机 光线充足</view>
		</view>
		<view class="faceBtn">
			<view class="faceBtn-check" v-if="false">
				<u-checkbox-group>
					<u-checkbox v-model="checked" active-color="#399CFE" shape="circle">我已阅读并同意<text
							class="ff-color-blue" @click.stop="agreemeetClick">《人脸识别协议》</text></u-checkbox>
				</u-checkbox-group>
			</view>
			<u-button @click="init" type="primary" shape="circle" ripple="true">开始刷脸</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: true,
				paramsList: ''
			}
		},
		onLoad(e) {
			console.log('前边页面传过来的数据', JSON.parse(e.paramsList))
			this.paramsList = JSON.parse(e.paramsList)
		},
		methods: {
			// 进行刷脸
			init() {
				this.$pageJump.navigateTo(
					'/pages/maintenance/mechanism/home/components/mechanismWork/detection/components/indexDetection?paramsList=' +
					JSON.stringify(this.paramsList)
				)
			},
			// 人脸协议
			agreemeetClick() {
				this.$pageJump.navigateTo(
					'/pages/maintenance/mechanism/home/components/mechanismWork/detection/components/detectionAgreement'
				)
			}
		}
	}
</script>

<style scoped lang="scss">
	.img-box {
		width: 100%;
		height: 636rpx;
	}

	.faceLoad {
		position: absolute;
		width: 100%;
		top: 10%;

		&-box {
			position: relative;
			width: 66%;
			margin: 0 17% 0 16.5%;
			height: 400rpx;
			// border: 1px solid red;
		}
	}

	.loading {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		// 横线，网格，渐变背景
		background: linear-gradient(#07aaff, #07aaff),
			linear-gradient(90deg, #ffffff33 1px, transparent 0),
			linear-gradient(#ffffff33 1px, transparent 0),
			linear-gradient(transparent, #07aaff);
		background-size: 100% 0.5%, 10% 100%, 100% 8%, 100% 100%;
		background-repeat: no-repeat, repeat, repeat, no-repeat;
		background-position: 0 0, 0 0, 0 0, 0 0;
		// 显示部分背景形状
		clip-path: polygon(0% 0%, 100% 0%, 100% 1.5%, 0% 1.5%);
		// 动画循环
		animation: move 3s infinite linear;
	}

	@keyframes move {
		to {
			background-position: 0 100%, 0 0, 0 0, 0 0;
			// 显示全部背景形状
			clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		}
	}

	.img-box img {
		display: block;
		width: 100%;
		height: 100%;
	}

	.ff-color-blue {
		color: #166BEA;
	}

	.faceTxt {
		text-align: center;

		&-tips1 {
			color: #777777;
		}
	}

	.faceBtn {
		width: 88%;
		margin: 0 6%;

		&-check {
			text-align: center;
			display: flex;
			justify-content: center;
			margin-bottom: 30rpx;
		}

	}

	.ff-font-15 {
		font-size: 30rpx;
		margin: 50rpx 0 12rpx;
	}

	.ff-font-17 {
		font-size: 36rpx;
	}

	.ff-font-23 {
		font-size: 46rpx;
		font-weight: 600;
		margin: 20rpx 0 170rpx;
	}

	/deep/ .u-btn--primary.data-v-3bf2dba7 {
		color: #ffffff;
		border-color: none;
		background-image: linear-gradient(to right, #4DBCFF, #3482FF);
		height: 95rpx;
		line-height: 95rpx;
	}
</style>